<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vueDemo1</title>
    <style type="text/css">
        *{margin: 0px;padding: 0px;}
        .classA{
            color: #fff;
            background: #0f0;
            font-weight: bold;
            padding:15px;
            display: inline-block;
        }
        .classB{
            background-color: #E35885;
        }
    </style>
</head>
<body>
    <div id="app">
        <span v-for="(sub,index) in subs" :class="isa?csa:csb" @click="change(sub,index)">
            {{sub}}
        </span><br/>
        您选择的课程是:<span :class="csa">{{clsub}}</span>
    </div>
    <script src="js/vue.min.js"></script>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                csa:"classA",
                csb:"classB",
                isa:true,
                clsub:"",
                subs:["HTML","CSS","JavaScript","Vue.js"]
            },
            methods:{
                change:function(sub,index){
                    $("span:eq("+index+")").css("background","red");
                    $("span:eq("+index+")").siblings().css("background","#0f0");
                    $("span:eq("+index+")").si
                    this.clsub=sub;
                }
            }
        })
    </script>
</body>
</html>